<template>	
	<view class="content">
		<form bindsubmit='submit'>
			<view class="edit_li">
				<text class="text">收货人</text>
				<input placeholder-class='input_zi' placeholder='请输入收货人' v-model="names"></input>
			</view>
			<view class="edit_li">
				<text class="text">联系电话</text>
				<input placeholder-class='input_zi' placeholder='请输入联系电话' v-model="phone"></input>
			</view>
			<view class="edit_li" @tap="showMulLinkageThreePicker">
				<text class="text">所在地区</text>
				<text class='input_zi'>{{citychose}}</text>
			</view>
			<view class="edit_li">
				<text class="text">街道</text>
				<input placeholder-class='input_zi' placeholder='请输入街道' v-model="street"></input>
			</view>
			<view class="edit_li">
				<text class="text">详细地址</text>
				<input placeholder-class='input_zi' placeholder='请输入详细地址' v-model="ads"></input>
			</view>
			<view class='edit_li'>
				<text class="text">设为默认地址</text>
			  <switch checked @change="switch1Change" color="#5a70fb" />
			</view>
			<view class='myads_but'>
			  <button form-type="submit" class="push">保存</button>
			</view>
		</form>
		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault" @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>

	</view>
</template>

<script>
	import mpvueCityPicker from '../../components/mpvue-citypicker/mpvueCityPicker.vue';
	import cityData from '../../components/mpvue-citypicker/city-data/city.js';
	export default {
		data() {
			return {
				cityPickerValueDefault: [0, 0, 1],
				citychose:'请选择',
				themeColor: '#007AFF',				
			};
		},
		components: {
			mpvueCityPicker
		},
		methods:{
			switch1Change: function (e) {
				console.log('switch1 发生 change 事件，携带值为' + e.detail.value)
			},
			columnchange(evt) {
				this.region = evt.detail.value;
			},
			showMulLinkageThreePicker() {
				this.$refs.mpvueCityPicker.show()
			},
			onConfirm(e) {
				console.log(JSON.stringify(e));
				this.citychose = e.label
			},
			onCancel(e){
				console.log(e)
			},
			submit(e){
				var names = e.detail.value.names;
				var phone = e.detail.value.phone;
				var street = e.detail.value.street;
				var ads = e.detail.value.ads;
				if(!names){
					uni.showToast({
						title: '发货人不能为空',
						icon:'none'
					});
					return false;
				}if(!phone){
					uni.showToast({
						title: '联系电话不能为空',
						icon:'none'
					});
					return false;
				}if(!street){
					uni.showToast({
						title: '街道不能为空',
						icon:'none'
					});
					return false;
				}if(!ads){
					uni.showToast({
						title: '详细地址不能为空',
						icon:'none'
					});
					return false;
				}else {
				  uni.showToast({
						title: '提交成功',
						icon: 'success'
				  })
				  setTimeout(function () {				//确认之后跳转的页面
					uni.navigateTo({
					  url: '../myads/myads',
					})
				  }, 1500);
				}
			},
		}
	}
</script>

<style>
.content{
	padding: 0 20upx;
	box-sizing: border-box;
	box-shadow: 0 8px 10px -8px #eee inset;
	border-top: 1px solid #eee;
}
.edit_li{
	line-height: 100upx;
	border-bottom: 1px solid #eee;
	padding: 0 20upx;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;	
	align-items: center;
}
.edit_li .text{
	width: 200upx;
}
.edit_li input{
	justify-content: flex-end;
	text-align: right;
	color: #a4a8b4;
}
.input_zi{
	color: #a4a8b4;
}
.push{
	background: #ff5d76;
	border: none;
	width: 250upx;
	height: 70upx;
	line-height: 70upx;
	color: #fff;
	border-radius: 50upx;
	font-size: 34upx;
	margin: 150rpx auto 0;
}
.mpvue-picker__hd {
	box-sizing: border-box;
}
</style>
